<template>
    <div class="vueAnimationPrc1">
      <div :class="{ shake: noActivated }">
        <button @click="noActivated = !noActivated">Click me</button>
        <span v-if="noActivated">Oh no!</span>
      </div>
    </div>
</template>
<script lang="ts">
import { Vue, Options, Watch, Provide } from 'vue-property-decorator';

@Options({ components: {

} })
export default class VueAnimationPrc1 extends Vue {
  public noActivated =false;
  public beforeCreate() {
  }
}
</script>

<style lang="postcss" scoped>
.vueAnimationPrc1{
  .shake{
    transform:translate3d(0,0,0);
    backface-visibility: hidden;
    perspective: 1000px;
    animation: move 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  }

  @keyframes move{
    10%,
    90%{
      transform:translate3d(-1px,0,0);
    }
    20%,
    80%{
      transform:translate3d(2px,0,0);
    }
    30%,
    50%,
    70%{
      transform:translate3d(-4px,0,0);
    }
    40%,
    60%{
      transform:translate3d(4px,0,0);
    }
  }
}
</style>
